<template>
	<div ref="container" class="three-container"></div>
</template>

<script>
	import * as THREE from 'three';
	import {
		GLTFLoader
	} from 'three/examples/jsm/loaders/GLTFLoader.js';

	export default {
		name: 'ThreeScene',
		mounted() {
			this.initThreeJS();
		},
		methods: {
			initThreeJS() {
				// 场景
				const scene = new THREE.Scene();

				// 相机
				const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
				camera.position.z = 5;

				// 渲染器
				const renderer = new THREE.WebGLRenderer();
				renderer.setSize(window.innerWidth, window.innerHeight);
				this.$refs.container.appendChild(renderer.domElement);

				// 加载自己模型文件
				const loader = new GLTFLoader();
				// const path = "20240823_test1.gltf";
				const path = "tripo_convert_0d350205-969f-4e53-94c2-d36020915f59.glb";
				loader.load('blender_models/' + path, (gltf) => {
					console.log("------------加载自己模型文件", gltf.scene)
					// 添加模型到场景
					scene.add(gltf.scene);

					// 遍历模型中的所有子对象
					model.traverse((child) => {
						if (child.isMesh) {
							// 修改材质的颜色
							child.material.color.set(0xff0000); // 设置为红色
						}
					});

					// 设置模型的位置
					model.position.set(0, 0, 0);
				});

				// 渲染循环
				const animate = () => {
					requestAnimationFrame(animate);
					// 旋转立方体
					// cube.rotation.x += 0.01;
					// cube.rotation.y += 0.01;
					renderer.render(scene, camera);
				};

				animate();
				// 处理窗口尺寸变化
				window.addEventListener('resize', () => {
					camera.aspect = window.innerWidth / window.innerHeight;
					camera.updateProjectionMatrix();
					renderer.setSize(window.innerWidth, window.innerHeight);
				});
			}
		}
	}
</script>

<style scoped>
	.three-container {
		width: 100vw;
		height: 100vh;
		overflow: hidden;
	}
</style>